<script setup lang="ts">
	import { useCounterStore } from '@/store'
	const counterStore = useCounterStore()

	defineProps<{ msg: string }>()
	const currentPage = ref(1)
	const pageSize = ref(100)
	const count = ref(0)

	const value1 = ref('')
	const handleSizeChange = (val: number) => {
		console.log(`${val} items per page`)
	}
	const handleCurrentChange = (val: number) => {
		console.log(`current page: ${val}`)
	}
</script>

<template>
	<h1>{{ msg }}</h1>
	<el-card class="text-left text-white border-white border-1 border-solid mt-10 bg-[#242424]">
		<template #header> 子组件 HelloWorld.vue</template>
		<el-form>
			<el-form-item label="数字："> {{ counterStore.count }}</el-form-item>
			<el-form-item label="加倍："> {{ counterStore.double }}</el-form-item>
		</el-form>
	</el-card>
	<el-card>
		<el-pagination
			v-model:current-page="currentPage"
			v-model:page-size="pageSize"
			:page-sizes="[100, 200, 300, 400]"
			background
			layout="total, sizes, prev, pager, next, jumper"
			:total="400"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
		/>
	</el-card>
</template>

<style scoped>
	.read-the-docs {
		color: #888;
	}
</style>
